<!-- 个人中心 -->
<template>
	<view class="page" v-if="chat_flag == 1">
		<view class="vip-box">
			<view class="vip-name">VIP会员</view>
			<view class="vip-tip-box">
				<u-avatar size="50" :src="vuex_user.avatar"></u-avatar>
				<view class="vip-tip" v-if="vuex_user.isVip">VIP会员({{vuex_user.vipEndDate}}到期)</view>
				<view class="vip-tip" v-else>暂未激活VIP会员</view>
			</view>
		</view>
		<view class="price-tab-box">
			<view class="price-tab"  v-for="(item, index) in dataList" :key="index">
				<view @click="changeTab(index)" class="price-tab-border" :class="[currentIndex==index ? 'active' : '']">
					<view class="price-texta">{{item.num}}{{item.unit}}</view>
					<view class="price-textb">￥{{item.month}}/{{item.tip}}</view>
					<view class="price-textc">￥{{item.pay}}</view>
					<view class="tab-band" v-if="item.band">新人优惠</view>
				</view>
			</view>
		</view>
		<view class="vip-title">
			VIP特权
		</view>
		<!-- <view class="vip-info">
			<view class="vip-info-icon">
				<u-icon name="star-fill" color="#ffd32f" size="36"></u-icon>
			</view>
			<view>
				<view class="vip-info-title">拥有申请置顶推荐特权</view>
				<view class="vip-info-text">每天可以免费申请置顶推荐</view>
			</view>
		</view> -->
		<view class="vip-info">
			<view class="vip-info-icon">
				<u-icon name="edit-pen-fill" color="#ffd32f" size="36"></u-icon>
			</view>
			<view>
				<view class="vip-info-title">每天3次发布动态</view>
				<view class="vip-info-text">每天可以免费发布3次动态</view>
			</view>
		</view>
		<view class="vip-info">
			<view class="vip-info-icon">
				<u-icon name="weixin-fill" color="#ffd32f" size="36"></u-icon>
			</view>
			<view>
				<view class="vip-info-title">每天3次添加微信</view>
				<view class="vip-info-text">每天可以免费添加3次微信</view>
			</view>
		</view>
		<view class="vip-info">
			<view class="vip-info-icon">
				<u-icon name="heart-fill" color="#ffd32f" size="36"></u-icon>
			</view>
			<view>
				<view class="vip-info-title">每天不限次打招呼</view>
				<view class="vip-info-text">每天可以不限次打招呼</view>
			</view>
		</view>
		<view class="vip-info">
			<view class="vip-info-icon">
				<u-icon name="map-fill" color="#ffd32f" size="40"></u-icon>
			</view>
			<view>
				<view class="vip-info-title">可查看附近的用户</view>
				<view class="vip-info-text">离得近奔现的概率更高</view>
			</view>
		</view>
		<view v-if="platform != 'ios'">
			<view class="btn-box" v-if="vuex_user.isVip">
				<view class="buy-btn">已开通</view>
			</view>
			<view class="btn-box" @click="payHandle" v-else>
				<view class="btn-border">
					<view class="buy-btn">￥{{pay.pay}} 立即购买</view>
					<view class="btn-tip">每天不到￥{{pay.day}}</view>
				</view>
			</view>
		</view>
		<coin-popup></coin-popup>
		<user-auth></user-auth>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				currentIndex: 1,
				dataList: [
					{
						band: false,
						num: 1,
						month: 1.5,
						pay: 10,
						day: 1.5,
						unit: '个周',
						tip: '天',
					},
					{
						band: true,
						num: 1,
						month: 0.7,
						pay: 20,
						day: 0.7,
						unit: '个月',
						tip: '天',
					},
					{
						band: false,
						num: 3,
						month: 0.5,
						pay: 45,
						day: 0.5,
						unit: '个月',
						tip: '月',
					}
				],
				pay: {
					
				},
				platform: '',
			}
		},
		onLoad() {
			this.pay = this.dataList[this.currentIndex];
			var platform = uni.getStorageSync("platform");
			this.platform = platform;
			this.getUserInfo();
		},
		computed: {
			...mapState(['chat_flag','vuex_user']),
		},
		methods: {
			getUserInfo() {
				this.$u.get('/system/user/getMyInfo').then(res => {
					this.user = res.user;
					this.$store.commit('setUser', this.user);
					this.$store.commit('setNoticeNum', this.user.giveNewNum+this.user.commentNewNum);
				})
			},
			changeTab(index) {
				this.currentIndex = index;
				this.pay = this.dataList[index];
			},
			payHandle() {
				var coinNum = 100*this.pay.pay;
				this.$u.post('/pay/coin/payVip',{
					coinNum: coinNum,
					appId: this.website.appId,
				}).then(res => {
					var that = this;
					uni.requestPayment({ 
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							uni.showToast({
								title: '支付成功',
								icon:'success',
								duration: 2000
							});
							that.getUserInfo();
						},
						fail: function(err) {
							uni.showModal({
								title: '温馨提示',
								content: '订单尚未支付',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									}
								}
							});
						}
					});
				});
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 15px;
		padding-bottom: 150px;
	}
	.vip-box {
		padding: 15px;
		background-image: linear-gradient(180deg, #ffd32f, #db854e);
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		margin-bottom: 15px;
	}
	.vip-name {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 50rpx;
	}
	.vip-tip {
		color: #fff;
		font-size: 24rpx;
		margin-left: 5px;
	}
	.price-tab-box {
		display: flex;
	}
	.price-tab {
		display: flex;
		flex: 1;
		padding-right: 5px;
	}
	.price-tab .active {
		border: 8rpx solid #e09049;
		color: #e09049;
	}
	.price-tab-box .price-tab:last-child {
		padding-right: 0;
	}
	.price-tab-border {
		border: 8rpx solid #f5e8e8;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 20px 0;
		border-radius: 10px;
		color: #858585;
		position: relative;
	}
	.price-texta {
		font-size: 36rpx;
		margin-bottom: 5px;
		font-weight: bold;
	}
	.price-textb {
		font-size: 30rpx;
		margin-bottom: 5px;
	}
	.price-textc {
		font-size: 36rpx;
	}
	.vip-title {
		font-size: 28rpx;
		color: #9e9696ed;
		padding: 15px 0;
		font-weight: bold;
	}
	.vip-info {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.vip-info-icon {
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid #f5e8e8;
		padding: 15px;
		border-radius: 10px;
	}
	.vip-info-title {
		font-size: 30rpx;
		margin-bottom: 5px;
		font-weight: bold;
	}
	.vip-info-text {
		font-size: 26rpx;
		color: #858585;
	}
	.btn-box {
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		padding: 15px;
	}
	.buy-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffd32f;
		padding: 15px;
		border-radius: 10px;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
	}
	.btn-border {
		position: relative;
	}
	.tab-band {
		position: absolute;
		background-color: #efc93c;
		top: -10px;
		border-radius: 5px;
		padding: 5px 10px;
		font-size: 22rpx;
		color: #fff;
	}
	.vip-tip-box {
		display: flex;
		align-items: center;
	}
	.btn-tip {
		position: absolute;
		background-color: #efa3fa;
		top: -10px;
		right: -3px;
		border: 3px solid #fff;
		border-radius: 10px;
		padding: 3px 5px;
		font-size: 22rpx;
		color: #fff;
	}
</style>
